package myJs.analysis

import myJs.Implicits._
import myJs.api.Api
import myJs.cps._
import slinky.core.FunctionalComponent
import slinky.core.annotations.react
import slinky.core.facade.Hooks._
import slinky.web.html._
import typings.csstype.csstypeStrings

/**
 * Created by yz on 21/1/2022
 */
@react object DependencyCp {

  type Props = Unit

  val component = FunctionalComponent[Props] { props =>

    val (geneName, setGeneName) = useState("")
    val (refreshImg, setRefreshImg) = useState(false)
    val (depShowLoading, setDepShowloading) = useState(false)
    val (scatterShowLoading, setScatterShowloading) = useState(true)

    object FTool {

      def geneNameChange = (v: String) => {
        setGeneName(v)
      }

      def refreshImg = () => {
        if (geneName.nonBlank) {
          setDepShowloading(false)
          setRefreshImg(true)
        }
      }

      def refreshImgChange = (v: Boolean) => {
        setRefreshImg(v)
      }

      def depShowLoadingChange = (v: Boolean) => {
        setDepShowloading(v)
      }

    }

    div(

      form(className := "form-horizontal", id := "form",

        div(style := Style(display = csstypeStrings.flex, marginRight = 15), className := "form-group",
          div(style := Style(flex = 2, display = csstypeStrings.flex, justifyContent = csstypeStrings.`flex-end`),
            label(style := Style(paddingTop = 15), className := "control-label",
              "Select Gene Symbol:"),
          ),
          div(style := Style(flex = 2, height = 34, display = csstypeStrings.flex, alignItems = csstypeStrings.center,
            paddingTop = 15), className := "col-sm-2",
            {
              val url = s"${Api.apiUrl}/gepLiver/analysis/getAllGene"
              PureAsyncSelect2Cp(width = "100%", onChange = FTool.geneNameChange,url=url)
            }
          ),
          div(style := Style(flex = 6, display = csstypeStrings.flex))
        ),

        div(className := "form-group",
          div(className := "actions col-sm-offset-2 col-sm-2",
            button(style := Style(width = "95%"), `type` := "button", className := "btn btn-primary myAddShow",
              onClick := FTool.refreshImg,
              s" Plot"
              ,
            ),
          ),
        ),
      ),

      div(
        hr(),
        CellLineDepCp(geneName = geneName, refreshImg = refreshImg, refreshImgChange = FTool.refreshImgChange,
          showLoading = depShowLoading, showLoadingChange = FTool.depShowLoadingChange),
        hr(),
        CellLineScatterCp(geneName = geneName, refreshImg = refreshImg, refreshImgChange = FTool.refreshImgChange,
          showLoading = scatterShowLoading)

      )


    )

  }

  object STool {


  }

}
